<template>
      <el-container>
      <el-header>
        <el-col :span="12">
            <div class="sub-title">{{name}}</div>
            <div class="demo-basic--circle">
              <div class="block"><el-avatar shape="square" :size="50" :src="form.headUrl"></el-avatar></div>
              <div class="block" v-for="size in sizeList" :key="size">
                <el-avatar shape="square" :size="size" :src="form.headUrl"></el-avatar>
              </div>
            </div>
          </el-col> 
      </el-header>
      <el-container>
        <el-aside width="200px">

        </el-aside>
        <el-main>
          <!--表单-->
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="我的头像">
              <el-upload
                class="avatar-uploader"
                :headers="config"
                action="/dev-api/admin/system/sysUser/avatar"
                
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"

              >
                <!-- <img v-if="avatar" :src="avatar" class="img-circle img-lg" /> -->
                <i class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>

            <el-form-item label="账号/学号">
              <el-input v-model="form.username" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="姓名">
              <el-input v-model="form.name"
              maxlength="6"
              show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="手机号">
              <el-input v-model="form.phone"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input v-model="form.email" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="个性签名">
              <el-input type="textarea" v-model="form.description"   maxlength="100" show-word-limit></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">确认修改</el-button>
              <el-button @click="close">取消</el-button>
            </el-form-item>
          </el-form>
        </el-main>
      </el-container>
    </el-container>


</template>
  
  <script>
  import { mapGetters } from 'vuex'
  import hapi from '@/api/home'
  import api from '@/api/system/user'
   export default {
    computed: {
      config() {
        return { token: this.token };
      },
    ...mapGetters([
      'name',
      'token'
    ])
  },
    data() {
      return {
        sizeList: [],
        form: {
          id:'',
          headUrl: '',
          username: '',
          name: '',
          phone: '',
          email: '',
          description: '',
        }
      };
    },
    mounted() {
      this.fetchall()
  },
    methods: {
      fetchall(){
        hapi.getinfo().then(resq=>{
          this.form = resq.data.sysUser
          // this.avatar = resq.data.sysUser.headUrl
        })
      },
      close(){
        window.close();
      },
      onSubmit() {
        api.Updata(this.form).then(response => {
        this.$message.success(response.message || '操作成功')
        this.close()
      })
      },
      handleAvatarSuccess(res, file) {
        let formData = new FormData();
        // 将文件传给后端下载
        formData.append("file", file);
        this.$message.success(res.message);
        // this.fetchall();
        this.form.headUrl = res.data.imgUrl;
        // // 将数据保存再vuex中
        // this.$store.commit("setAvatar", this.form.headUrl);
        // this.form.headUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
    }
  }
  </script>

  <style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>